<template>
  <view class="warp">
    <!-- background pic start -->
    <view class="bg" :style="{height:'calc(440rpx + ' + StatusBar + 'px)'}">
      <!-- <image :src="imgBaseUrl + 'user/login-bg.png'" mode="widthFix" class="bg-img"></image> -->
      <view class="logo-contnt flex align-center justify-center flex-direction">
        <view class="width-180 height-180">
			<image src="/static/logo.png" class="width-180 height-180" ></image>
		</view>
        
      </view>
    </view>
    <!-- background pic end -->
			<!-- 初次下载 -->
			<!-- #ifdef APP-PLUS || H5 -->
				<view v-if="toppop" class="kaiqiweizhi flex align-center justify-between" :style="{top:(0 + StatusBar + 55) + 'px'}">
					<view class="flex align-center">
						<view class="">
							初次下载app的老用户，记得点击修改账号密码登陆，或者直接验证码登录哦！
						</view>
					</view>
					<view class="text-df">
						<image src="@/static/close.png" @click="toppop = false" style="width:28rpx;height: 28rpx;" mode="aspectFill"></image>
					</view>
				</view>
			<!-- #endif -->
    <!-- 密码login start -->
    <!-- 密码login start -->
    <view class="flex align-center solid-bottom margin-lr padding-tb">
      <image class="width-34 margin-right" :src="imgBaseUrl + 'user/phone.png'" mode="widthFix"></image>
      <input type="number" focus v-model="phone" maxlength="11" placeholder-class="fu-fs32 text-bf"
        :placeholder="i18n['请输入手机号']" name="input" />
    </view>
    <view class="flex align-center solid-bottom margin-lr padding-tb">
      <image class="width-34 margin-right" :src="imgBaseUrl + 'user/pwd.png'" mode="widthFix"></image>
      <view class="flex align-center justify-between flex-sub" style="min-width: 1px;">
        <input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf" v-if="type == 'password'"
          type="password" v-model="password" :placeholder="i18n['请输入密码(6-12位字母+数字)']" minlength="6" maxlength="12" />
        <input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf" v-if="type == 'text'"
          type="text" v-model="password" :placeholder="i18n['请输入密码(6-12位字母+数字)']" minlength="6" maxlength="12" />
        <image class="width-34" :src="imgBaseUrl + 'user/open.png'" :data-type="type" @click.stop="is_kejian"
          v-if="type == 'text'" mode="widthFix"></image>
        <image class="width-34" :src="imgBaseUrl + 'user/close.png'" :data-type="type" @click.stop="is_kejian"
          v-if="type == 'password'" mode="widthFix"></image>
      </view>
    </view>
  <!--  <view class="flex align-center justify-end text-vecode padding-right margin-top-sm">
      <view @click="handleJump" data-type="REDIRECT" data-url="/pages/user/login/login-code/index">{{i18n['验证码登录']}}
      </view>
    </view> -->
    <!-- 密码login end -->
    <!-- 立即登录按钮 start -->
    <button type="success" style="background-color: #FD9CAE;" class="text-white margin-lr-lg margin-top-lg bg-theme fu-fs32 round" :loading="isLoading" shape="circle" @click="handleLogin">
      {{i18n['登录']}}
    </button>
    <!-- 立即登录按钮 end -->
		<!-- 快捷登陆 start -->
		<!-- <ThirdLogin :check="is_select_agree" v-if="is_show != 1"></ThirdLogin> -->
		<!-- 快捷登陆 end -->
  <!--  <view class="margin-top flex align-center justify-center text-999 fu-fs28">
      <view class="margin-right" @tap="handleJump" data-type="REDIRECT" :data-url="'/pages/user/login/register/index'">{{i18n['注册账号']}}</view>
      <view class="padding-left solids-left" @click="handleJump" data-type="REDIRECT" data-url="/pages/user/login/forget/index">{{i18n['忘记密码']}}</view>
    </view> -->
    <view class="footer">
      
      <!-- 协议同意 start -->
      <view class="flex align-center justify-center text-666 fu-fs24 margin-top-64">
        <image class="width-30 height-30 margin-right-xs" @click="handle_select" v-if="is_select_agree" :src="imgBaseUrl + 'checked.png'"></image>
        <image class="width-30 height-30 margin-right-xs" @click="handle_select" v-else
          :src="imgBaseUrl + 'unchecked.png'"></image>
        <view>
          {{i18n['已阅读并同意']}}
          <text class="text-bold" @tap="handleJump"  style="color:#FD9CAE"
            data-url="/pages/user/login/user-agreement/index?id=1">《用户协议》</text>
          {{i18n['与']}}
          <text class="text-bold" @tap="handleJump" style="color:#FD9CAE"
            data-url="/pages/user/login/user-agreement/index?id=2">{{i18n['《隐私政策》']}}</text>
        </view>
      </view>
      <!-- 协议同意 end -->
    </view>
    <!-- 断网监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 断网监测 end -->

  </view>
</template>
<script>
  // 引入验证方法
  import {
    validate
  } from "@/common/utils/index";
  import ThirdLogin from '../../components/third-login/third-login.vue';
  export default {
    components: {
      ThirdLogin
    },
    data() {
      return {
        is_select_agree: false,
        phone: '', //手机号
        password: '', //密码
        isLoading: false, // 立即登录按钮是否点击,@Boolean
        type: 'password', //密码类型
		toppop:true,
		is_show:'0'
      };
    },
    onUnload() {
      // 页面关闭时清除计时器，优化性能
      clearInterval(this.timer);
    },
		onLoad() {
			// #ifdef APP-PLUS
			this.is_show = '1'
			this.getHiddenInterface()
			// #endif
		},
    methods: {
      /**
       * @param 是否选择同意协议
       */
      handle_select() {
        this.is_select_agree = !this.is_select_agree
      },

      //密码是否可见
      is_kejian(e) {
        let type = e.currentTarget.dataset.type;
        if (type == 'password') {
          this.type = 'text';
        } else {
          this.type = 'password';
        }
      },
			// 上架隐藏
			getHiddenInterface(){
				this.$api.post(global.apiUrls.hiddenInterface,{code: 'is_show'}).then(res=>{
					if(res.data.code == 1){
						this.is_show = res.data.data
					}
				})
			},
      /**
       * @description  立即登录
       */
      handleLogin() {
        // #ifdef APP-PLUS
        // @desc 隐藏安全键盘
        plus.key.hideSoftKeybord();
        // #endif
        // 如果按钮状态是加载中，直接return，防止用户多次点击
        if (this.isLoading) return;
        if (!this.is_select_agree) return this.$message.info(this.i18n['请阅读并勾选页面协议']);
      	
        let {
          phone,
     		   password
        } = this;
        // 手机号不存在
        if (!phone) return this.$message.info(this.i18n['请输入手机号']);
        // 手机号不符合正则验证
        if (!validate(phone, 'phone')) return this.$message.info(this.i18n['请输入正确的手机号']);
        // 密码不符合正则验证
        if (!validate(password, 'password')) return this.$message.info(this.i18n['请输入字母加数字6-12位密码']);
        
        let clientId = 'clientId'
        let appSystem = 'appSystem'

        // #ifdef APP-PLUS
       	clientId = '';
        appSystem = uni.getSystemInfoSync().platform == 'ios' ? 1 : 2;
        // #endif

        // 上述验证都通过，将按钮的点击状态改为true
        this.isLoading = true;
        // postloginByAccount 账号密码登录接口
        this.$api.post(global.apiUrls.postloginByAccount, {
          mobile: phone,
          password,
          clientId,
          appSystem
        }).then(res => {
          if (res.data.code == 1 && res.data.data) {
            this.$message.info(res.data.msg); // 提示框
            this.$store.commit('updateUserInfo', res.data.data.userinfo); // 修改vuex储存的用户信息
            setTimeout(() => {
              // 把按钮的状态改为false
              this.isLoading = false;
              uni.switchTab({
              	url:'/pages/tab/my/my/index'
              }) // 返回上一页
            }, 800)
          } else {
            // 把按钮的状态改为false
            this.isLoading = false;
            this.$message.info(res.data.msg); // 错误提示框
          }
     	  }).catch(err => {
          // 把按钮的状态改为false
          this.isLoading = false;
        })
      },
    },
  };
</script>
<style lang="scss">
	.kaiqiweizhi-button{
			padding: 8rpx 12rpx;
			line-height: 1;
			background-color: #64BF1D;
			color: #fff;
			font-size: 24rpx;
			border-radius: 12rpx;
			margin-left: 12rpx;
		}
		.kaiqiweizhi{
			position: fixed;
			left: 24rpx;
			right: 24rpx;
			width:calc(100% - 48rpx);
			height: 80rpx;
			border-radius: 18rpx;
			padding:0 24rpx;
			background: rgba(0, 0, 0, 0.4);
			z-index: 999;
			font-size: 24rpx;
			color: #fff;
		}
  // 主体 start
  .warp {
    background: #fff;
    min-height: 100vh;
    overflow: hidden;

    // background pic start
    .bg {
      width: 100%;
      position: relative;
      .bg-img {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
      }
      .logo-contnt {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        .logo {
          background-image: url(https://localelife.chunchuangkeji.cn/h5img/logo.jpg);
          background-repeat: no-repeat;
          background-size: contain;
          border-radius: 40rpx;
          overflow: hidden;
        }
      }
    }



    // background pic end
    // 验证码login end

  }

  // 主体 end
  .footer {
    position: fixed;
    bottom: 116rpx;
    bottom: calc(116rpx + constant(safe-area-inset-bottom));
    bottom: calc(116rpx + env(safe-area-inset-bottom));
    width: 100%;
  }
</style>
